<template>
  <view class="withdraw-detail-container">
    
    <!-- 主要内容 -->
    <scroll-view class="detail-scroll" scroll-y>
      <!-- 状态卡片 -->
      <view class="status-card" :class="detailData.status">
        <view class="status-icon">
          <uni-icons 
            :type="statusIcon" 
            size="28" 
            :color="statusColor"
          ></uni-icons>
        </view>
        <text class="status-text">{{ statusText }}</text>
        <text class="amount">¥{{ detailData.amount }}</text>
        <text class="tip" v-if="detailData.status === 'processing'">提现申请已提交，正在处理中</text>
        <text class="tip" v-else-if="detailData.status === 'success'">提现成功，已到账</text>
        <text class="tip" v-else-if="detailData.status === 'failed'">提现失败，原因：{{ detailData.remark }}</text>
      </view>
      
      <!-- 提现信息 -->
      <view class="info-card">
        <view class="section-title">
          <text>提现信息</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">提现方式</text>
          <view class="info-value">
            <image 
              class="method-icon" 
              :src="methodIcon" 
              mode="aspectFit"
            ></image>
            <text>{{ detailData.methodName }}</text>
          </view>
        </view>
        
        <view class="info-item">
          <text class="info-label">提现账号</text>
          <text class="info-value">{{ accountInfo }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">收款姓名</text>
          <text class="info-value">{{ detailData.realName }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">申请时间</text>
          <text class="info-value">{{ formatTime(detailData.createTime) }}</text>
        </view>
        
        <view class="info-item" v-if="detailData.status !== 'processing'">
          <text class="info-label">完成时间</text>
          <text class="info-value">{{ formatTime(detailData.finishTime) }}</text>
        </view>
      </view>
      
      <!-- 金额明细 -->
      <view class="amount-card">
        <view class="section-title">
          <text>金额明细</text>
        </view>
        
        <view class="amount-item">
          <text class="amount-label">提现金额</text>
          <text class="amount-value">¥{{ detailData.amount }}</text>
        </view>
        
        <view class="amount-item">
          <text class="amount-label">手续费</text>
          <text class="amount-value">-¥{{ detailData.fee }}</text>
        </view>
        
        <view class="amount-divider"></view>
        
        <view class="amount-item total">
          <text class="amount-label">实际到账</text>
          <text class="amount-value">¥{{ detailData.actualAmount }}</text>
        </view>
      </view>
      
      <!-- 失败原因 -->
      <view class="fail-reason" v-if="detailData.status === 'failed'">
        <view class="section-title">
          <text>失败原因</text>
        </view>
        <view class="reason-content">
          <text>{{ detailData.remark }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons" v-if="detailData.status === 'failed'">
        <button class="action-btn" @click="reSubmit">重新提交</button>
        <button class="action-btn contact">联系客服</button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatTime } from '@/utils/util.js'

// 详情数据
const detailData = ref({
  id: '',
  amount: '0.00',
  fee: '0.00',
  actualAmount: '0.00',
  method: 'alipay',
  methodName: '支付宝',
  realName: '',
  account: '',
  status: 'processing',
  createTime: new Date().toISOString(),
  finishTime: '',
  remark: ''
})

// 计算属性
const statusText = computed(() => {
  const statusMap = {
    'processing': '处理中',
    'success': '提现成功',
    'failed': '提现失败'
  }
  return statusMap[detailData.value.status] || detailData.value.status
})

const statusIcon = computed(() => {
  const icons = {
    'processing': 'spinner-cycle',
    'success': 'checkmarkempty',
    'failed': 'closeempty'
  }
  return icons[detailData.value.status] || 'info'
})

const statusColor = computed(() => {
  const colors = {
    'processing': '#FF9800',
    'success': '#4CAF50',
    'failed': '#F44336'
  }
  return colors[detailData.value.status] || '#FF9800'
})

const methodIcon = computed(() => {
  return detailData.value.method === 'alipay' 
    ? '/static/images/alipay.png' 
    : '/static/images/bank.png'
})

const accountInfo = computed(() => {
  if (detailData.value.method === 'alipay') {
    return detailData.value.account
  } else {
    return `${detailData.value.bankName} (${detailData.value.account})`
  }
})

// 页面加载
onLoad((options) => {
  if (options.id) {
    // 根据ID获取提现详情
    fetchWithdrawDetail(options.id)
  }
})

// 获取提现详情
const fetchWithdrawDetail = (id) => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    const mockData = {
      id: id,
      amount: '500.00',
      fee: '7.50',
      actualAmount: '492.50',
      method: Math.random() > 0.5 ? 'alipay' : 'bank',
      methodName: Math.random() > 0.5 ? '支付宝' : '中国工商银行',
      realName: '张三',
      account: Math.random() > 0.5 ? 'zhangsan@alipay.com' : '6222 **** **** 5678',
      bankName: '中国工商银行',
      status: ['processing', 'success', 'failed'][Math.floor(Math.random() * 3)],
      createTime: new Date('2023-06-15T14:30:00').toISOString(),
      finishTime: new Date('2023-06-16T09:15:00').toISOString(),
      remark: '银行卡信息有误，请核对后重新提交'
    }
    
    detailData.value = mockData
  }, 500)
}

// 重新提交
const reSubmit = () => {
  uni.showModal({
    title: '重新提交',
    content: '确定要重新提交此提现申请吗？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateTo({
          url: '/pages/wallet/withdraw',
          success: () => {
            // 在实际应用中，这里可以预填充表单数据
          }
        })
      }
    }
  })
}

// 联系客服
const contact = () => {
  uni.makePhoneCall({
    phoneNumber: '4001234567'
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>

.withdraw-detail-container {
  height: calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  background-color: $light-bg;
}


.detail-scroll {
  flex: 1;
  height: calc(100vh - 100rpx);
  padding-bottom: 40rpx;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  margin: 20rpx;
  background-color: $white-bg;
  border-radius: 16rpx;
  
  &.processing {
    .status-icon {
      animation: rotating 2s linear infinite;
    }
  }
  
  .status-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 152, 0, 0.1);
    margin-bottom: 30rpx;
  }
  
  .status-text {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
    margin-bottom: 15rpx;
  }
  
  .amount {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
  }
  
  .tip {
    font-size: $font-size-26rpx;
    color: $text-color-666;
  }
  
  &.success {
    .status-icon {
      background-color: rgba(76, 175, 80, 0.1);
    }
    
    .status-text, .amount {
      color: #4CAF50;
    }
  }
  
  &.failed {
    .status-icon {
      background-color: rgba(244, 67, 54, 0.1);
    }
    
    .status-text, .amount {
      color: #F44336;
    }
  }
}

.info-card, .amount-card, .fail-reason {
  background-color: $white-bg;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 0 30rpx;
}

.section-title {
  font-size: $font-size-28rpx;
  font-weight: bold;
  color: $text-color;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .info-label {
    font-size: $font-size-28rpx;
    color: $text-color-666;
  }
  
  .info-value {
    font-size: $font-size-28rpx;
    color: $text-color;
    display: flex;
    align-items: center;
    
    .method-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }
  }
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 0;
  
  .amount-label {
    font-size: $font-size-28rpx;
    color: $text-color;
  }
  
  .amount-value {
    font-size: $font-size-28rpx;
    color: $text-color;
  }
  
  &.total {
    .amount-label, .amount-value {
      font-weight: bold;
      font-size: $font-size-30rpx;
    }
    
    .amount-value {
      color: $primary-color;
    }
  }
}

.amount-divider {
  height: 1rpx;
  background-color: #f5f5f5;
  margin: 10rpx 0;
}

.fail-reason {
  .reason-content {
    padding: 30rpx 0;
    font-size: $font-size-28rpx;
    color: $text-color;
    line-height: 1.6;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 30rpx;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: $font-size-28rpx;
    border-radius: 40rpx;
    margin: 0 15rpx;
    
    &.contact {
      background-color: $white-bg;
      color: $text-color;
      border: 1rpx solid #ddd;
    }
    
    &:not(.contact) {
      background-color: $primary-color;
      color: $text-color-inverse;
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>